<template>
	<view class="coupon-detail">
		<view class="detail-card">
			<view class="coupon-title">门店专享满100减20</view>
			<view class="coupon-desc">仅限北京雀发潮KTV体验店使用</view>
			<view class="coupon-status unused">可用</view>
			<view class="coupon-expire">有效期至 2024-12-31</view>
		</view>
		<view class="section">
			<view class="section-title">可用门店</view>
			<view class="store-list">
				<view class="store-item">
					<view class="store-name">北京雀发潮KTV体验店</view>
					<view class="store-address">北京市朝阳区xxx路88号</view>
				</view>
				<!-- 可继续添加更多门店 -->
			</view>
		</view>
		<view class="section">
			<view class="section-title">使用规则</view>
			<view class="rule-list">
				<view class="rule-item">1. 本券仅限指定门店使用，不可兑换现金，不可找零。</view>
				<view class="rule-item">2. 有效期内使用，逾期作废。</view>
				<view class="rule-item">3. 每单仅限使用一张，不与其他优惠同享。</view>
			</view>
		</view>
		<view class="use-btn-box">
			<button class="use-btn">立即使用</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 可根据实际传参动态获取卡券详情
			}
		}
	}
</script>

<style lang="scss">
	.coupon-detail {
		min-height: 100vh;
		background: #f8f8f8;

		.detail-card {
			background: #fff;
			border-radius: 16rpx;
			margin: 32rpx 24rpx 0 24rpx;
			padding: 32rpx 24rpx;

			.coupon-title {
				font-size: 36rpx;
				font-weight: bold;
				color: #222;
			}

			.coupon-desc {
				font-size: 28rpx;
				color: #888;
				margin: 12rpx 0 8rpx 0;
			}

			.coupon-status {
				font-size: 26rpx;
				font-weight: bold;

				&.unused {
					color: #2468f2;
				}

				&.used {
					color: #b0b0b0;
				}
			}

			.coupon-expire {
				font-size: 24rpx;
				color: #b0b0b0;
				margin-top: 8rpx;
			}
		}

		.section {
			background: #fff;
			border-radius: 16rpx;
			margin: 24rpx;
			padding: 24rpx;

			.section-title {
				font-size: 30rpx;
				font-weight: bold;
				margin-bottom: 16rpx;
				color: #2468f2;
			}

			.store-list {
				.store-item {
					margin-bottom: 16rpx;

					.store-name {
						font-size: 28rpx;
						color: #222;
					}

					.store-address {
						font-size: 24rpx;
						color: #888;
					}
				}
			}

			.rule-list {
				.rule-item {
					font-size: 26rpx;
					color: #666;
					margin-bottom: 8rpx;
				}
			}
		}

		.use-btn-box {
			margin: 40rpx 24rpx 0 24rpx;

			.use-btn {
				width: 100%;
				height: 90rpx;
				line-height: 90rpx;
				background: #2468f2;
				color: #fff;
				font-size: 32rpx;
				border-radius: 16rpx;
				font-weight: bold;
			}
		}
	}
</style>